import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput, Pressable, Alert } from 'react-native'
import React, {useState} from 'react'
import api from '../config.js'

//内部样式
let ss = StyleSheet.create({
  container: {
    paddingVertical: 80,
    paddingHorizontal: 45,
  },
  inputGroup: {
    flexDirection: 'row',   //修改主轴方向
    alignItems: 'center',   //子元素在交叉轴上居中对齐 
    borderBottomColor: '#888',
    borderBottomWidth: 1,  
    marginBottom: 25,   
  },
  input: {
    flex: 1,
    fontSize: 16,
  },
  icon: {
    marginRight: 6
  },
  btn: {
    backgroundColor: '#0aa1ed',
    color: '#fff',
    textAlign: 'center',
    fontSize: 16,
    paddingVertical: 10,
    borderRadius: 5,
    marginTop:45,    //注意：相邻元素的margin会叠加，而不合并
  },
  f4: {
    flexDirection: 'row',
    alignItems: 'center',            //子元素在交叉轴上的对齐方式
    justifyContent: 'space-around', //子元素在主轴上的对齐方式
    marginVertical: 80,
  },
  title: {
    fontSize: 30,
    color: '#aaa'
  }
})
export default function AdminLogin( {navigation} ) {         
  //状态数据 —— 当前是否为“密码输入框”
  let [isPassword, setIsPassword] = useState(true)
  //状态数据 —— 管理员名
  let [aname, setAname] = useState("admin")
  //状态数据 —— 管理员密码
  let [apwd, setApwd] = useState("123456")

  function doLogin(){
    let url = api.adminLogin 
    //console.log(url)

    /***使用fetch发起GET请求***/
    // url += `?aname=${aname}&apwd=${apwd}`
    // fetch(url)
    // .then(res=>{
    //   // console.log('请求成功:', res.status)
    //   // console.log('请求成功:', res.ok)
    //   // console.log('请求成功:', res.headers)
    //   // console.log('请求成功:', res.body)   //undefined
    //   // fetch标准认为“响应消息主体可能很大，直接保存在变量中，内存可能溢出”
    //   // 强制要求程序员来处理响应消息主体数据，res.text()/res.blod()/res.json()
    //   // res.json().then(data=>{console.log('响应消息主体：', data)})
    //   return res.json()
    // })
    // .then(data=>{
    //   console.log(data)
    // })
    // .catch(err=>{
    //   console.log('请求失败：', err)
    // })

     /***使用fetch发起POST请求***/
     let options = {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}, //请求消息头部       
        body: `aname=${aname}&apwd=${apwd}`
        //body: {aname, apwd}  //无效请求主体数据，底层不会把对象转换为键值对
     }
     fetch(url, options)
     .then(res=>res.json())
     .then(data=>{
       //console.log('请求成功，且响应消息主体解析完成', data)
       if(data.code === 200){   //登录成功
          Alert.alert(
            '成功',                //标题
            '欢迎回来：'+aname,    //内容
            [{                    //按钮组
              text:'进入主菜单',
              onPress: ()=>navigation.navigate('menu')
            }]
          )
       }else {                  //登录失败
          Alert.alert(  //弹出对话框
            '错误', 
            '登录失败！原因是：'+data.msg,
            [{text:'确定'}]
          )
       }
     })
     .catch(err=>{
       console.log('请求失败 或 响应主体解析失败', err)
     })
  }
  return (
    <View style={ss.container}>
      {/* F1：用户名输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput value={aname} onChangeText={(v)=>setAname(v)} style={ss.input} placeholder="请输入管理员名"/>
        <Image style={ss.icon} source={require('../assets/img/user.png')}/>
      </View>

      {/* F2：密码输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput value={apwd} onChangeText={(v)=>setApwd(v)} style={ss.input} placeholder="请输入登录密码" secureTextEntry={isPassword}/>
        <Pressable onPress={()=>setIsPassword(!isPassword)}>
          {
            isPassword 
            ? (<Image style={ss.icon} source={require('../assets/img/eye-close.png')}/>)
            : (<Image style={ss.icon} source={require('../assets/img/eye-open.png')}/>)
          }      
        </Pressable>
      </View>
      
      {/* F3：提交按钮 */}
      <TouchableOpacity activeOpacity={0.6} onPress={doLogin}>
        <Text style={ss.btn}>登录</Text>
      </TouchableOpacity>

      {/* F4：LOGO和标题  */}
      <View style={ss.f4}>
        <Image source={require('../assets/img/logo.png')}/>
        <Text style={ss.title}>后台管理系统</Text>
      </View>

      {/* F5：版权声明 */}
      <Text style={{textAlign:'center'}}>版权所有 © 达内科技 2022</Text>
    </View>
  )
}